<template>
	<view>
		<baseHead title="企业主页" color="#FFF" bg="#171B33" text_right="编辑资料" :iconShow="false" :showRightIcon="false" :right="true"
			@clickRight="clickRight" textrightcolor="#fff">
		</baseHead>
		<view class="boxCla">
			<view class="companyDetailshead" v-if="listdata">
				<view class="company_data fl-t">
					<image class="logo" :src="URL + listdata.LogoPath"></image>
					<view>
						<view class="name">{{ listdata.FullName }}</view>
						<view class="condition">
							{{ listdata.IndustryStr }}
							<view class="xian" v-if="listdata.IndustryStr "></view>
							<!-- {{ listdata.CategoryDesc }} -->
							<!-- <view class="xian" v-if="listdata.CategoryDesc"></view> -->
							{{ listdata.SizeDesc }}
							<view class="xian" v-if="listdata.SizeDesc"></view>
							{{listdata.StageDesc}}
						</view>
					</view>
				</view>
			</view>
			<view class="contentnr" v-if="listdata">
				<view v-if="listdata.Description">
					<view class="more">
						<view class="title">企业简介</view>
					</view>
					<view class="">
						<u-read-more ref="uReadMore" showHeight="110" :shadowStyle="shadowStyle" :closeText="closeText"
							:toggle="true">
							<u-parse class="enterpriseProfileclass" :content="listdata.Description"
								@load="load">{{listdata.Description}}</u-parse>
						</u-read-more>
					</view>
				</view>

				<view v-if="qiyefuli.length > 0">
					<view class="more">
						<view class="title">企业福利</view>
					</view>
					<view>
						<view class="fl-w boxview">
							<view class="textnr" v-for="item in qiyefuli" :key="item">
								{{ item }}
							</view>
						</view>
					</view>
				</view>

				<view v-if="videolist">
					<view class="more" @click="clickMoreVideo">
						<view class="title">企业视频</view>
						<view class="title-more">更多
							<u-icon name="arrow-right" color="#fff" size="12"></u-icon>
						</view>
					</view>
					<view class="videoview">
						<view class="videoClass" v-for="(item,index) in videolist" :key="index"
							@click="gotoVideo(item)">
							<image class="imageClass" src="/static/static/images/shipinfengmian.png">
							</image>
							<!-- <image class="top-img" src="/static/static/images/video-file1.png">
							</image> -->
						</view>
					</view>
				</view>

				<view v-if="imgList">
					<view class="more" @click="clickMorePhoto">
						<view class="title">企业相册</view>
						<view class="title-more">更多
							<u-icon name="arrow-right" color="#fff" size="12"></u-icon>
						</view>
					</view>
					<view class="imageBox">
						<view class="imgClass">
							<image v-for="(item, index) in imgList" :key="index" class="preitemimage" v-if="item"
								@click="previewImage(index, imgList)" :src="item" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>

				<template v-if="jinshengtongdao.length > 0">
					<view class="more">
						<view class="title">晋升通道</view>
					</view>
					<view>
						<view class="fl-w boxview">
							<view class="textnr" v-for="item in jinshengtongdao" :key="item">
								{{ item }}
							</view>
						</view>
					</view>
				</template>

				<!-- <u-popup :show="show" @close="close" @open="open">
					<view style="margin: 40rpx 20rpx;">
						<scroll-view scroll-y="true" style="height: 500rpx; overflow: hidden;">
							<view v-for="(item, index)  in listdata.Address" class="typebox" @click="clickzwType(item)"
								style="margin-top:50rpx ;">
								<text> {{item.Address}} </text>
							</view>
						</scroll-view>
					</view>
				</u-popup> -->

				<view class="more" @click="dizhiClick" v-if="listdata.Address">
					<view class="title">公司地址</view>
					<view class="title-more">更多
						<u-icon name="arrow-right" color="#fff" size="12"></u-icon>
					</view>
				</view>

				<view class="map" v-if="listdata.Address">
					<map style="width: 100%; height: 100%" :latitude="AddressLatitude" :longitude="AddressLongitude"
						v-show="!show">
						<cover-view class="flexmap">
							<cover-view class="msaptest">
								{{addrestext}}
							</cover-view>
							<cover-view class="mtestdahoh" @click="dahNavigation">
								<cover-image src="/static/icon/daohang.png" class="icondhs"
									@click="dahNavigation"></cover-image>
								<cover-view class="dhtext" @click="dahNavigation">导航</cover-view>
							</cover-view>
						</cover-view>
					</map>
				</view>



				<!-- <view class="more">
					<view class="title">工商信息</view>
				</view>
				<view class="introduce">
					<view class="introduce-title">
						<view class="introduce-text">公司全称：</view>
						<view>{{listdata.FullName}}</view>
					</view>
					<view class="introduce-title">
						<view class="introduce-text">法定代表人：</view>
						<view>骆大海</view>
					</view>
					<view class="introduce-title">
						<view class="introduce-text">注册资本：</view>
						<view>1000万</view>
					</view>
					<view class="introduce-title">
						<view class="introduce-text">成立日期：</view>
						<view>2014-01-01</view>
					</view>
				</view> -->


			</view>
			<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		data() {
			return {
				qiyefuli: [],
				jinshengtongdao: [],
				URL: this.$config.domain.staticUrl,
				latitude: "",
				longitude: "",
				listdata: {},
				closeText: "查看更多",
				openText: "",
				show: false,
				shadowStyle: {
					backgroundImage: "none",
				},
			};
		},
		components: {
			baseHead,
		},
		onLoad() {},
		onShow() {
			this.datalist();
		},
		created() {},

		computed: {
			AddressLatitude() {
				if (this.listdata.Address) {
					let Latitude = "";
					this.listdata.Address.forEach(res => {
						if (res.IsDefault) {
							Latitude = res.Latitude
						}
					})
					if (!Latitude) {
						Latitude = this.listdata.Address[0].Latitude;
					}
					return Latitude;
				}
			},

			AddressLongitude() {
				if (this.listdata.Address) {
					let Longitude = "";
					this.listdata.Address.forEach(res => {
						if (res.IsDefault) {
							Longitude = res.Longitude
						}
					})
					if (!Longitude) {
						Longitude = this.listdata.Address[0].Longitude;
					}
					return Longitude;
				}
			},

			addrestext() {
				if (this.listdata.Address) {
					let addr = "";
					this.listdata.Address.forEach(res => {
						if (res.IsDefault) {
							addr = res.Address

						}
					})
					if (!addr) {

						addr = this.listdata.Address[0].Address;
					}

					return addr;
				}
			},


			videolist() {

				if (this.listdata.CorpVideo && this.listdata.CorpVideo !== '[]') {
					let srcd = this.listdata.CorpVideo;
					return srcd
				}
			},
			imgList() {
				if (this.listdata.PhotoPaths && this.listdata.PhotoPaths !== '[]') {
					let srcd = JSON.parse(this.listdata.PhotoPaths);
					return srcd.map((res, index) => {
						return this.URL + res;
					});
				}
			},
		},
		methods: {

			// 公司地址更多
			dizhiClick() {
				uni.navigateTo({
					url: `/pages/views/packageA/type-jobhunting/search/qiydizhi?params=${encodeURIComponent(JSON.stringify(this.listdata))}`
				})
			},

			videoimge(item) {
				if (item.ImgPath) {
					return this.URL + item.ImgPath
				} else {
					return 'https://cdn.uviewui.com/uview/album/1.jpg'
				}
			},
			clickzwType(item) {
				this.show = false;
				uni.openLocation({
					latitude: Number(item.Latitude),
					longitude: Number(item.Longitude),
					scale: 10,
					name: item.Address,
					success: function() {
						console.log('success');
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},

			open() {
				// console.log('open');
			},
			close() {
				this.show = false
			},

			//视频跳转
			gotoVideo(item) {
				let videoUrl = item.VideoPath;
				uni.navigateTo({
					url: '/pages/views/packageA/type-recruit/video/index?item=' + JSON.stringify(videoUrl)
				})
			},

			datalist() {
				let qyid = uni.getStorageSync("dianjiqiye");
				this.$http.core.tenantgetall(qyid.Id).then((res) => {
					// console.log(res);
					if (res.Success) {
						this.listdata = res.Result;
						this.jsondata()
						this.jsondata1()
					}

				});
			},
			//企业福利
			jsondata() {
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				// let arr4 = [];
				arr1 = JSON.parse(this.listdata.Welfares);
				arr2 = JSON.parse(this.listdata.Insurance);
				arr3 = JSON.parse(this.listdata.Benefits);
				this.qiyefuli = [...arr1, ...arr2, ...arr3]
			},
			// 晋升通道
			jsondata1() {
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				arr1 = JSON.parse(this.listdata.Promotion);
				arr2 = JSON.parse(this.listdata.Cultivation);
				arr3 = JSON.parse(this.listdata.Encouragement);
				let arr4 = [...arr1, ...arr2, ...arr3]
				this.jinshengtongdao = [...new Set(arr4)]
			},
			clickRight() {
				uni.navigateTo({
					url: "jbzlindex",
				});
			},
			
			dahNavigation() {
				let that = this;
				uni.openLocation({
					latitude: Number(that.AddressLatitude),
					longitude: Number(that.AddressLongitude),
					scale: 10,
					name: that.addrestext,
					success: function() {
						console.log('success');
					},
					fail: function(e) {
						console.log(e);
					}
				})
			},
			previewImage(index, item) {
				console.log(item);
				uni.previewImage({
					current: index,
					urls: item,
				});
			},
			// 实时获取展开更多的高度
			load() {
				this.$refs.uReadMore.init();
			},
			clickMoreVideo() {
				uni.navigateTo({
					url: "/pages/views/packageB/type-recruit/jibenshezhi/szmetme/qiyshipin?type=2",
				});
			},
			clickMorePhoto() {
				uni.navigateTo({
					url: "/pages/views/packageB/type-recruit/jibenshezhi/szmetme/qiytupian?type=2",
				});
			},
			
			

		},
	};
</script>

<style lang="scss" scoped>
	.boxCla {
		background-color: #171B33;
		height: 100vh;
	}

	.companyDetailshead {
		height: 260rpx;
		width: 100%;
		background-color: #171B33;
		box-sizing: border-box;
		border-bottom: 2rpx solid #2b2f45;

		.return {
			padding: var(--status-bar-height) 0 70rpx 30rpx;
		}

		.company_data {
			box-sizing: border-box;
			padding: 70rpx 0 20rpx 30rpx;

			.logo {
				width: 128rpx;
				height: 128rpx;
				background: #ffffff;
				border-radius: 10rpx;
				margin-right: 30rpx;
			}

			.name {
				font-size: 46rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fff;
			}

			.condition {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8b8d99;
				padding-top: 20rpx;
				display: flex;
				align-items: center;

				.xian {
					width: 0rpx;
					height: 16rpx;
					opacity: 0.2;
					border: 1rpx solid #707070;
					margin: 0 18rpx;
				}
			}
		}
	}

	.contentnr {
		width: 100%;
		padding: 0 30rpx;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		background-color: #171B33;


		// 企业简介
		.enterpriseProfileclass {
			color: #8b8d99;
		}

		// 图片
		.imageBox {
			flex-wrap: wrap;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			white-space: nowrap;

			.imgClass {
				flex-shrink: 0;
				width: 48%;
				height: 200rpx;
				box-sizing: border-box;

				.preitemimage {
					width: 100%;
					height: 100%;
					margin-right: 30rpx;
					border-radius: 15rpx;
				}
			}

		}

		// 视频
		.videoview {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			overflow: hidden;

			.videoClass {
				width: 48%;
				height: 220rpx;
				flex-shrink: 0;
				position: relative;
				border-radius: 15rpx;
				margin-right: 30rpx;

				.imageClass {
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}

				.top-img {
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.more {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				padding: 0rpx;
				height: 100%;
				font-family: PingFang SC;
				font-weight: 800;
				color: #fff;
				padding: 30rpx 0 30rpx;
				font-size: 36rpx;
			}

			.title-more {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #fff;
			}
		}

		// 工商信息
		.introduce {
			height: 236rpx;
			padding: 20rpx;
			background-color: #2f3248;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			border-radius: 20rpx;
			color: #8b8d99;
			line-height: 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.introduce-title {
				display: flex;

				.introduce-text {
					margin-right: 40rpx;
				}
			}
		}

		.map {
			width: 100%;
			height: 300rpx;
			background: #f2fff6;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;

			.flexmap {
				position: relative;
				top: 30%;
				width: 100%;
				height: 70rpx;
				box-sizing: border-box;
				display: flex;

				.msaptest {
					margin-left: 2%;
					width: 70%;
					text-align: center;
					line-height: 70rpx;
					padding: 0rpx 10rpx;
					border-radius: 10rpx;
					background-color: rgba(0, 0, 0, 0.5);
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #ffffff;
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					-webkit-box-orient: vertical;
					/** 设置或检索伸缩盒对象的子元素的排列方式 **/
					-webkit-line-clamp: 1;
					/** 显示的行数 **/
				}

				.mtestdahoh {
					margin-left: 2%;
					width: 20%;
					display: flex;
					justify-content: center;
					text-align: center;
					background-color: #0FCC87;
					border-radius: 70rpx;
					// overflow: hidden;

					.icondhs {
						width: 33rpx;
						height: 33rpx;
						margin: 20rpx 10rpx;
					}

					.dhtext {
						color: #ffffff;
						line-height: 70rpx;
						font-size: 30rpx;
					}
				}

			}
		}

		.boxview {
			border-radius: 4rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8b8d99;
			margin: 0 0rpx 20rpx 0;
			// justify-content: space-between;

			.textnr {
				width: 22%;
				border-radius: 10rpx;
				padding: 10rpx 0rpx;
				margin: 10rpx;
				text-align: center;
				background-color: #2f3248;
			}
		}
	}
</style>